<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
  组件参数传递
     1.  向组件内部传递参数
        1.1  组件标签属性
            props
               1. [标签属性名]    在props中接收到的参数可以向使用data中的数据一样 通过插值语法直接访问
            标签属性名编写规则:
                HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
                这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
              2. 设置参数传递的限制
                 {
                    标签属性名:{
                        规则名: 规则值
                    }

                 }

     2.  父子组件传参
           vm  父组件   =>  子组件 blog-title

-->
<div id="app">
    <blog-title v-for="(blog,index ) in blogs" :key="index" :title="blog.title"
                :author-name="blog.authorName"></blog-title>
    <hr>

    <blog-title title="第三个参数" author-name="jack"></blog-title>
</div>

<script>
    // 博客组件
    const blogTitle = {
        template: `
          <h2>{{ title }} :{{ authorName }}</h2>
        `,
        // props: ['title', 'authorName']
        props: {
            title: {
                type: String,
                required:true
            },
            authorName: {
                type: String,
                default:'admin'
            }
        }

    }
    let vm = new Vue({
        el: '#app',
        data: {
            title: '',
            authorName: '',
            blogs: []
        },
        methods: {},
        components: {
            'blog-title': blogTitle
        },
        created() {
            // 发送http请求  获取博客信息    响应
            console.log("获取博客信息的http请求已发送")
            // this.title = '第一个博客'
            // this.authorName = 'tom'
            this.blogs = [
                {
                    title: '第一个博客',
                    authorName: 'tom',
                },
                {
                    title: '第二个博客',
                    authorName: 'jack',
                }
            ]

        }
    })
</script>
</body>
</html>
